<template>
	<section id="homeDeailes">
		<van-pull-refresh v-model="isLoading" @refresh="onRefresh">
			<ul class="homeDeailes_list">
				<li class="homeDeailes_li" v-for="(list,index) in navList" :key="index">
					<a :href="list.url">
						<span class="homeDeailes_title">{{list.topic}}</span>
						<span class="homeDeailes_imgs">
							<img :src="list.miniimg[0].src"/>
							<!-- <img :src="list.miniimg02[0].src"/> -->
							<!-- <img src="@/asserts/images/a.jpg"/> -->
						</span>
						<span class="homeDeailes_Name">{{list.source}}</span>
					</a>
				</li>
				<van-button plain type="primary" size="large" @click="addMoreFunc">加载更多</van-button>
				<!-- <li class="homeDeailes_li">
					<router-link to="">
						<span class="homeDeailes_title">重要消息，北京新的城市建设规划制定，又有大批人要离开北京了？</span>
						<span class="homeDeailes_imgs">
							<img src="@/asserts/images/a.jpg"/>
							<img src="@/asserts/images/a.jpg"/>
							<img src="@/asserts/images/a.jpg"/>
						</span>
						<span class="homeDeailes_Name">人民网</span>
					</router-link>
				</li>
				 -->
			</ul>
		</van-pull-refresh>
	</section>
</template>

<script>
	export default {
		data() {
			return {
				isLoading: false,
				params_type: 'toutiao', // 新闻类型 -- 根据组件传参改变 
				params_lastRowkey: '', // 最后一条新闻记录值
				navList:[], // 新闻列表
				
			};
		},
		components: {
		},
		methods: {
			// 记录请求最后key值
			rememberfunc(arrs){
				if (arrs) {
					let length = arrs.length - 1
					this.params_lastRowkey = arrs[length].rowkey
				} else{
					console.error('记录值参数异常！')
				}
				
			},
			// 新闻
			newsNavigationFunc() {
				this.service.newsNavigation({
					type:this.params_type,
					qid:'test',
					ispc:0,
					num:20,
				}).then(res => {
					if (res.stat == 1) {
						console.log(res.data)
						this.navList = res.data
						
						this.rememberfunc(this.navList)
					}
				}).catch(errorMsg =>{
					console.error(errorMsg)
				})
			},
			// 下拉刷新
			onRefresh() {
				setTimeout( () => {
					this.isLoading = false;
					// 新闻列表
					this.service.newsNavigation({
						type:this.params_type,
						qid:'test',
						ispc:0,
						num:30,
					}).then(res => {
						if (res.stat == 1) {
							console.log(res.data)
							this.navList = res.data
							
							this.rememberfunc(this.navList)
							this.$toast('刷新成功')
						}
					}).catch(errorMsg =>{
						console.error(errorMsg)
					})
					
				}, 500);
			},
			// 加载更多
			addMoreFunc(){
				this.service.newsNavigation({
					type:this.params_type,
					startkey: this.params_lastRowkey,
					qid:'test',
					ispc:0,
					num:10,
				}).then(res => {
					if (res.stat == 1) {
						console.log(res.data)
						for(let items in res.data){
							this.navList.push(res.data[items])
						}
						this.rememberfunc(res.data)
					}
				}).catch(errorMsg =>{
					console.error(errorMsg)
				})
				
			},
			
		},
		mounted(){
			let _this = this
			
			this.newsNavigationFunc();
			this.$root.bus.$on("changeType", function(obj) {
		      _this.params_type = obj.key;
		      _this.newsNavigationFunc();
		    });
		},
		watch: {
		},
		computed: {		
		}
	};
</script>
<style scoped lang="scss">
	@import "@/asserts/styles/home/home.scss";
</style>
